<template>
	<div class="iconsContainer">
		<div class="iconsContent" v-loading="loading">
			<el-tooltip
				class="item"
				effect="dark"
				:content="item.icon"
				placement="top"
				v-for="(item,index) in iconList"
				:key="index"
			>
				<div class="iconclass" @click="copy(this)">
					<i :class="item.icon"></i>
				</div>
			</el-tooltip>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			iconList: [],
			loading: false,
		};
	},
	methods: {
		getIcons() {
			this.$ajax
				.get("/icon")
				.then((res) => {
					if (res.status == 200) {
						this.iconList = res.data;
						this.loading = false;
					}
				})
				.catch((err) => {
					this.loading = false;
				});
		},
		copy(el) {
			if (
				el instanceof HTMLInputElement ||
				el instanceof HTMLTextAreaElement
			) {
				el.select();
			} else {
				var range = document.createRange();
				var end = el.childNodes.length;
				range.setStart(el, 0);
				range.setEnd(el, end);

				var selection = window.getSelection();
				selection.removeAllRanges();
				selection.addRange(range);
			}

			document.execCommand("copy_icon_class", false, null);
			range && selection.removeRange(range);
		},
	},
	mounted() {
		this.loading = true;
		this.getIcons();
	},
	components: {},
};
</script>

<style lang="scss" scoped>
.iconsContainer {
	display: flex;
	justify-content: center;
	.iconsContent {
		// margin-top: 71px;
		width: 100%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.iconclass {
			cursor: pointer;
			width: 80px;
			height: 80px;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			i {
				font-size: 20px;
				color: #67c23a;
			}
		}
		.iconclass:hover {
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		}
	}
}
</style>